/* Stylesheet: forms.css */

@layer components {
	/* === Text Labeling === */

	.legend {
		@apply font-heading-token text-xl md:text-2xl;
	}

	.label {
		@apply space-y-1;
	}

	/* === Core Styles === */

	.input,
	.textarea,
	.select,
	.input-group {
		@apply w-full transition duration-200;
		/* Background */
		@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105;
		/* Ring */
		@apply !ring-0;
		/* Border */
		@apply border-token border-surface-400-500-token focus-within:border-primary-500;
	}

	/* Base Inputs */
	.input,
	.input-group {
		@apply rounded-token;
	}

	/* Container Inputs */
	.textarea,
	.select {
		@apply rounded-container-token;
	}

	/* Select (size/multiple) */
	.select {
		@apply p-2 pr-8 space-y-1;
	}
	.select[size] {
		@apply bg-none;
	}
	.select optgroup {
		@apply space-y-1 font-bold;
	}
	.select optgroup option {
		@apply ml-0 pl-0;
	}
	.select optgroup option:first-of-type {
		@apply mt-3;
	}
	.select optgroup option:last-child {
		@apply !mb-3;
	}
	.select option {
		@apply bg-surface-200-700-token px-4 py-2 rounded-token cursor-pointer;
	}
	.select option:checked {
		/* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */
		background: rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);
		@apply text-on-primary-token;
	}

	/* Checkbox & Radio */
	.checkbox,
	.radio {
		@apply w-5 h-5 !ring-0 rounded cursor-pointer;
		/* Background */
		@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105;
		/* Border */
		@apply border-token border-surface-400-500-token focus:border-primary-500;
	}
	.checkbox:checked,
	.checkbox:indeterminate,
	.radio:checked {
		@apply bg-primary-500 hover:bg-primary-500 focus:bg-primary-500 focus:ring-0;
	}
	.radio {
		@apply rounded-token;
	}

	/* === Specialized === */

	/* File Inputs */
	.input[type='file'] {
		@apply p-1;
	}

	/* Color Picker */
	/* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
	.input[type='color'] {
		@apply border-none w-10 h-10 overflow-hidden rounded-token cursor-pointer;
		-webkit-appearance: none; /* WebKit Only */
	}
	.input[type='color']::-webkit-color-swatch-wrapper {
		@apply p-0;
	}
	.input[type='color']::-webkit-color-swatch {
		@apply border-none hover:brightness-110;
	}
	.input[type='color']::-moz-color-swatch {
		@apply border-none;
	}

	/* === States === */

	.input:disabled,
	.textarea:disabled,
	.select:disabled,
	.input-group > input:disabled,
	.input-group > textarea:disabled,
	.input-group > select:disabled {
		@apply !opacity-50 !cursor-not-allowed hover:!brightness-100;
	}

	.input[readonly],
	.textarea[readonly],
	.select[readonly] {
		@apply !border-transparent !cursor-not-allowed hover:!brightness-100;
	}

	/* === Input Groups === */

	.input-group {
		@apply grid overflow-hidden;
	}
	.input-group input:not([type="checkbox"]):not([type="radio"]),
	.input-group select {
		@apply border-0 !ring-0 bg-transparent;
	}
	.input-group select option {
		@apply bg-surface-200-700-token;
	}
	.input-group div,
	.input-group a,
	.input-group button {
		@apply px-4 flex justify-between items-center;
	}
	.input-group-divider input,
	.input-group-divider select,
	.input-group-divider div,
	.input-group-divider a {
		@apply border-l border-surface-400-500-token focus:border-surface-400-500-token;
		/* Disable Ring */
		@apply !ring-0;
		/* Prevent buttons from being squished */
		@apply !min-w-fit;
	}
	.input-group-divider *:first-child {
		@apply !border-l-0;
	}
	.input-group-shim {
		@apply bg-surface-400/10 text-surface-600-300-token;
	}

	/* === Variants === */

	/* success */
	.input-success {
		@apply bg-success-200 dark:bg-success-200 border-success-500 dark:border-success-500 text-success-700 dark:text-success-700;
	}
	.input-success::-moz-placeholder {
		@apply text-success-700;
	}
	.input-success:-ms-input-placeholder {
		@apply text-success-700;
	}
	.input-success::placeholder {
		@apply text-success-700;
	}

	/* warning */
	.input-warning {
		@apply bg-warning-200 dark:bg-warning-200 border-warning-500 dark:border-warning-500 text-warning-700 dark:text-warning-700;
	}
	.input-warning::-moz-placeholder {
		@apply text-warning-700;
	}
	.input-warning:-ms-input-placeholder {
		@apply text-warning-700;
	}
	.input-warning::placeholder {
		@apply text-warning-700;
	}

	/* error */
	.input-error {
		@apply bg-error-200 dark:bg-error-200 border-error-500 dark:border-error-500 text-error-500 dark:text-error-500;
	}
	.input-error::-moz-placeholder {
		@apply text-error-500;
	}
	.input-error:-ms-input-placeholder {
		@apply text-error-500;
	}
	.input-error::placeholder {
		@apply text-error-500;
	}

	/* === Variants === */

	/* Material */
	.variant-form-material {
		/* Border Radius */
		@apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none;
		/* Background */
		@apply bg-surface-500/10 dark:bg-surface-500/20;
		/* Border */
		@apply border-0 border-b-2;
		/* Blur / high CPU usage on some browsers, see https://github.com/skeletonlabs/skeleton/issues/1805 */
		/* @apply backdrop-blur; */
	}
	.variant-form-material[type='file'] {
		@apply !py-1.5;
	}
}
